<template>
  <div class="commoninfo_box">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 所属分类 -->
      <el-form-item label="所属分类">
        <el-select v-model="ruleForm.category" placeholder="请选择所属分类">
          <el-option label="分类一" value="shanghai"></el-option>
          <el-option label="分类二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <!-- 商品名称 -->
      <el-form-item label="商品名称" style="width: 320px">
        <el-input v-model="ruleForm.category"></el-input>
      </el-form-item>

      <!-- 所属品牌 -->
      <el-form-item label="所属品牌">
        <el-select v-model="ruleForm.brand" placeholder="请选择品牌">
          <el-option label="分类一" value="shanghai"></el-option>
          <el-option label="分类二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <!-- 商品简介 -->
      <el-form-item label="商品简介" style="width: 320px">
        <el-input v-model="ruleForm.info" type="textarea"></el-input>
      </el-form-item>

      <!-- 商品图片 -->
      <el-form-item label="商品图片" style="width: 320px">
        <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          name="good_pic"
          :http-request="uploadPicFn"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <!-- 轮播图图片 -->
      <el-form-item label="轮播图图片" style="width: 320px">
        <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          name="good_pic"
          :http-request="uploadPicFn"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <!-- 商品单位 -->
      <el-form-item label="商品单位" style="width: 320px">
        <el-input v-model="ruleForm.unit"></el-input>
      </el-form-item>
      <!-- 商品库存 -->
      <el-form-item label="商品库存" style="width: 320px">
        <el-input v-model="ruleForm.good_num"></el-input>
      </el-form-item>
      <!-- 商品售价 -->
      <el-form-item label="商品售价" style="width: 320px">
        <el-input v-model="ruleForm.good_price"></el-input>
      </el-form-item>
      <!-- 推荐类型 -->
      <el-form-item label="推荐类型">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="新品" name="type"></el-checkbox>
          <el-checkbox label="人气" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 上架 -->
      <el-form-item label="上架">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <!-- 排序 -->
      <el-form-item label="排序">
        <el-input v-model="ruleForm.sort" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确认保存</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      ruleForm: {
        // 所属分类
        category: "",
        // 商品名称
        goodname: "",
        // 商品品牌
        brand: "",
        // 商品简介
        info: "",
        // 商品单位
        unit: "",
        // 商品库存
        good_num: "",
        // 商品售价
        good_price: "",
        // 上架
        delivery: false,
        // 推荐类型
        type: [],
        // 排序
        sort: "",
      },
      // 商品图片
      imageUrl: "",
    };
  },
  methods: {
    beforeAvatarUpload() {},
    uploadPicFn() {},
    // 确认保存
    submitForm() {
      this.$router.push("/good");
    },
    // 取消
    resetForm() {
      this.$router.push("/good");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>